<template>
  <div class="music" v-show="useStore.isShowMusic">
    <img :src="useStore.bf_List.al.picUrl" :class="{nameImg_active:data.isShowPlayBtn,nameImg_paused:!data.isShowPlayBtn}" />
    <div class="music-item">
        <Vue3Marquee style="width:130px">{{useStore.bf_List.name}}</Vue3Marquee>
      <div class="play-btn">
        <svg class="icon" aria-hidden="true" @click="previousMusic">
          <use xlink:href="#icon-shangyishou-yuanshijituantubiao-copy"></use>
        </svg>
        <svg class="icon" aria-hidden="true" v-if="data.isShowPlayBtn" @click="handleAudio(false)">
          <use xlink:href="#icon-zanting1-copy"></use>
        </svg>
        <svg class="icon" aria-hidden="true" v-else @click="handleAudio(true)">
          <use xlink:href="#icon-bofang-copy"></use>
        </svg>
        <svg class="icon" aria-hidden="true" @click="nextMusic">
          <use xlink:href="#icon-xiayishou-yuanshijituantubiao-copy"></use>
        </svg>
        <svg class="icon" aria-hidden="true" @click="handleSearchList">
          <use xlink:href="#icon-sousuo1-copy-copy"></use>
        </svg>
        <svg class="icon icon-List" aria-hidden="true" @click="handlePlayList">
          <use xlink:href="#icon-gl-playlistMusic3"></use>
        </svg>
      </div>
      <audio
        ref="audio"
        @canplaythrough="handleLoad"
        @ended="nextMusic"
        :src="`https://music.163.com/song/media/outer/url?id=${useStore.bf_List.id}.mp3`"
      ></audio>
    </div>
  </div>
</template>
 
<script setup>
import { useHomeStore } from "@/stores/home";
// 跑马灯
import { Vue3Marquee } from "vue3-marquee";
import "vue3-marquee/dist/style.css";
import {onMounted, reactive,ref,watch} from 'vue'
const useStore = useHomeStore();
const audio = ref()
const data = reactive({
    isShowPlayBtn: false,
})
const handleSearchList =()=>{
  // console.log(11);
  useStore.isMusicSearchList = true
}
const handlePlayList =()=>{
  useStore.isMusicPlayList = true
}
const handleLoad = () => {
  if (data.isShowPlayBtn) {
    audio.value.play();
  }
}
const nextMusic = ()=>{
  data.isShowPlayBtn = true;
  if (useStore.index === useStore.musicList.length -1) {
    useStore.index = 0;
    useStore.bf_List = useStore.musicList[useStore.index];
    audio.value.play();
  } else {
    useStore.index++;
    useStore.bf_List = useStore.musicList[useStore.index];
    audio.value.play();
  }
}
const previousMusic = ()=>{
   data.isShowPlayBtn = true;
  if (useStore.index <= 0) {
    useStore.index = useStore.musicList.length -1;
    useStore.bf_List = useStore.musicList[useStore.index];
  } else {
    useStore.index--;
    useStore.bf_List = useStore.musicList[useStore.index];
  }
}
const handleAudio = (bool) => {
  data.isShowPlayBtn = bool;
  if (data.isShowPlayBtn) {
    audio.value.play();
  } else {
    audio.value.pause();
  }
};
watch(
  () => useStore.bf_List,
  () => {
    audio.value.play();
    data.isShowPlayBtn = true;
  }
)

</script>
 
<style lang="less">
.music {
    z-index: 9999;
    position: fixed;
    bottom: 20px;
    right: 5px;
    color: #fff;
    display: flex;
    align-items: center;
    img{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 5px;
        animation: rotated 10s infinite linear;
    }
    .nameImg_active {
    animation-play-state: running;
  }
  .nameImg_paused {
    animation-play-state: paused;
  }
  @keyframes rotated {
    0% {
      transform: rotateZ(0deg);
    }
    100% {
      transform: rotateZ(360deg);
    }
  }
  .music-item {
    font-size: 12px;
    .play-btn {
        display: flex;
        align-items: center;
        cursor: pointer;
        .icon{
            width: 25px;
            height: 25px;
            
        }
        .icon:nth-child(4){
          width: 23px;
          height: 23px;
          margin-left: 3px;
        }
        .icon-List{
          width: 20px;
          height: 20px;
          margin-left: 5px;
        }
        /deep/ .vue3-marquee {
          width: 100px;
        }
    }
  }
}
</style>

